<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js">
			
		</script>
	</head>
	<body>
		<div id="demo">
			<form action="#" @submit.prevent="submit1">
				
				姓名：<input type="text" v-model="name"/><br>
				性别：
				<input type="radio"  value="男" v-model='sex'/>男
				<input type="radio"  value="女" v-model="sex"/>女<br>
				技能（多选）：
				<input type="checkbox"  value="java" v-model="skills" />Java开发
				<input type="checkbox"  value="python"v-model="skills" />python开发
				<input type="checkbox" value="vue" v-model="skills"/>vue开发<br>
				目标城市：
				<select  v-model="city">
				    <option v-for="c in citys" :value="c.code">
				        {{c.name}}
				         </option>
				   </select><br>
				 <button type="submit" >提交</button>
			</form>
			
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#demo",
				data:{
					name:"",
					sex:"男",
					skills:['vue','python'],
					citys:[{code:"sh",name:"上海"},
							{code:"bj",name:"北京"},
							{code:"zj",name:"浙江"}],
					city:"sh"
					
				},
				methods:{
					submit1(){
						alert(this.name + ', ' + this.sex + ', ' + this.skills +  ', ' + this.city )
					}
				}
			})
		</script>
	</body>
</html>
